@function pxToRem($val) {
    @return $val/100 + rem;
}
.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    &.empMainContent{
        .content{
            width:calc(100% - 100px) ;
        }
    }
    .scorll{
        flex: 1;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .scorll::-webkit-scrollbar {
        width: 6px;
    }
    /*滚动槽*/
    .scorll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }
    /* 滚动条滑块 */
    .scorll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }
    .scorll::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(255, 0, 0, 0.4);
    }
    .content {
        width: 100%;
        height: 100%;
        .search {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 10px;
            background:#fff;
            padding: pxToRem(25) 5% 0 1%;
            box-sizing: border-box;
            &.searchBox{
                justify-content: flex-start;
                flex-wrap: wrap;
                padding: 0 pxToRem(20) pxToRem(15);
                .list{
                    margin-right: pxToRem(50);
                    span{
                        &:first-of-type{
                            color: #373D41;
                            font-family: MicrosoftYaHeiLight;
                        }
                    }

                }
            }
            .left{
                width: 50%;
                /deep/ .ivu-tabs-bar{
                    width: 100%;
                    margin: 0 auto;
                    border: none;
                }
                /deep/ .ivu-tabs-tab{
                    padding-bottom: pxToRem(19);
                    box-sizing: border-box;
                }
            }
            .right{
                margin-top: pxToRem(-19);
            }
            .list{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: pxToRem(20);
                margin-top: pxToRem(20);
                span{
                    width: 100px;
                    text-align: right;
                }
                .ulbox1{
                    list-style: none;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-right: 20px;
                    .libox1{
                        width: 50px;
                        height: 32px;
                        text-align: center;
                        line-height: 32px;
                        color: var(--themeColor);
                        cursor: pointer;
                        border: 1px solid var(--themeColor);
                    }
                    li:first-child{
                        border-radius: 16px 0  0 16px;
                    }
                    li:last-child{
                        border-radius: 0 16px  16px 0;
                    }
                    .active{
                        background: var(--themeColor);
                        color: #fff;
                        border: none;
                    }
                }
            }
        }
        .tabBox{
            width:100%;
            margin:20px auto 0;
            background-color: #fff;
            border-radius: 10px;
            padding-bottom: pxToRem(20);
            box-sizing: border-box;
            .down{
                width: 96%;
                display: flex;
                height: 100%;
                justify-content: space-between;
                align-items: center;
                padding: pxToRem(30) 0;
                box-sizing: border-box;
                margin: auto;

            }
            .boxList{
                width: 100%;
                display: flex;
                height: 100%;
                justify-content: space-between;
                align-items: center;
                padding: pxToRem(30) pxToRem(50);
                box-sizing: border-box;
                .item{
                      width: pxToRem(160);
                      height: pxToRem(110);
                      background: #FCFDFF;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      border: 1px solid var(--themeColor);
                      padding: pxToRem(30) pxToRem(10);
                      box-sizing: border-box;
                      cursor: pointer;
                      &:hover {
                            transform: scale( 1.05);
                            transition: all 1s;
                            box-shadow: 0 4px 8px rgba(46,104,253,.12);
                        }
                      &.machRuleType{
                          background-color: #eee;
                          color: #fff;
                      }
                    .left{
                        width: pxToRem(50);
                        height: pxToRem(50);
                        margin-right: pxToRem(10);
                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .right{
                          flex: 1;
                        .p{
                          width: pxToRem(80);
                          font-weight: 500;
                          letter-spacing: pxToRem(2);
                          font-size: pxToRem(14);
                          font-family: Microsoft YaHei;
                          font-weight: 400;
                          color: #181818;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          &:last-of-type{
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                          }
                          .num{
                              font-size: pxToRem(24);
                          }
                      }
                    }

                }
            }
            .tableList{
                width: 96%;
                margin: auto;

                /deep/ .el-table{
                    color: #181818;
                    font-family: MicrosoftYaHei;
                    font-size: pxToRem(14);
                    td,
                    th.is-leaf{
                        border-bottom: none;
                    }
                    tr{
                        border: none;
                    }
                    thead th{
                        color: #666666;
                        font-weight: 400;
                    }
                }
                /deep/ .el-table__row{
                    background-color: #fff;
                    cursor: pointer;
                }
                /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td{
                    background-color: #F3F6FD ;
                    cursor: pointer;
                }
            }
        }
        .center{
            width: 100%;
            border-radius: 10px;
            background: #fff;
            height: 4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            .center_item{
                width: 96%;
                height: calc(100% - 0.4rem);
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left{
                    width: 6rem;
                    height: 100%;
                    .title{
                        width: auto;
                        padding: 0.1rem;
                        height: pxToRem(40);
                        span{
                            color: var(--themeColor);
                        }
                    }
                    .chart{
                        width: 100%;
                        height: pxToRem(330);
                    }
                }
                .right{
                    width: calc(100% - 5rem);
                    height: 100%;
                }
            }

        }
        .bottom{
            width: 100%;
            border-radius: 10px;
            background: #fff;
            height: 5rem;
        }
    }
}
.radiusBorder{
    >>>.ivu-input{
        border-radius: 16px 0 0 16px;
        background: #EBF2F8;
        border-color:#EBF2F8 ;
    }
}
>>>.ivu-input-search{
    border-radius: 0 16px 16px 0;
}
